.opacity-enter, .opacity-leave-to {
  opacity: 0 !important;
}

.opacity-enter-active, .opacity-leave-active {
  transition: 1s !important;
}

.opacity-enter-to, .opacity-leave {
  opacity: .5 !important;
}

.opt-enter, .opt-leave-to {
  opacity: 0 !important;
  transform: translateX(0);
}

.opt-enter-active, .opt-leave-active {
  transition: 1s !important;
}

.opt-enter-to, .opt-leave {
  opacity: .5 !important;
  transform: translateX(-100%);
}

.jumpTop-enter, .jumpTop-leave-to {
  opacity: 0 !important;
  transform: translateY(10%);
}

.jumpTop-enter-active, .jumpTop-leave-active {
  transition: .5s !important;
}

.jumpTop-enter-to, .jumpTop-leave {
  opacity: 1 !important;
  transform: translateY(0);
}

.componentTab-enter, .componentTab-leave-to {
  opacity: 0 !important;
  transform: translateX(100%);
}

.componentTab-enter-active, .componentTab-leave-active {
  transition: .5s !important;
}

.componentTab-enter-to, .componentTab-leave {
  opacity: 1 !important;
  transform: translateX(0);
}

.componentAllTabL-enter, .componentAllTabL-leave-to {
  transform: translateX(-100%);
}

.componentAllTabL-enter-active, .componentAllTabL-leave-active {
  transition: .5s !important;
}

.componentAllTabL-enter-to, .componentAllTabL-leave {
  transform: translateX(0);
}

.componentAllTabR-enter, .componentAllTabR-leave-to {
  transform: translateX(100%);
}

.componentAllTabR-enter-active, .componentAllTabR-leave-active {
  transition: .5s !important;
}

.componentAllTabR-enter-to, .componentAllTabR-leave {
  transform: translateX(0);
}
